import React, {Component} from 'react';
import PropTypes from 'prop-types';
import TodoButton from '../TodoButton/index.jsx';

import {
  ALL,
  DONE,
  UNDO
} from '../../constants/actionTypes';

class TodoStateChange extends Component {

  constructor(props) {
    super(props);
    this._all = this._all.bind(this);
    this._done = this._done.bind(this);
    this._undo = this._undo.bind(this);
  }

  static propTypes = {
    _onFilterClick: PropTypes.func.isRequired,
    filter: PropTypes.oneOf([
      ALL,
      DONE,
      UNDO
    ]).isRequired
  }

  static defaultProps = {

  }

  _all() {
    this.props._onFilterClick(ALL);
  }

  _done() {
    this.props._onFilterClick(DONE);
  }

  _undo() {
    this.props._onFilterClick(UNDO);
  }

  render() {

    return (
      <div style = {{display: 'flex'}}>
        <TodoButton
          _onClick = {this._all}
          name = '全部'
          styleButton = {this.props.filter == ALL ? {color: 'blue'} : {}}
        />
        <TodoButton
          _onClick={this._done}
          name = '已完成'
          styleButton = {this.props.filter == DONE ? {color: 'blue'} : {}}
        />
        <TodoButton
          _onClick = {this._undo}
          name = '未完成'
          styleButton = {this.props.filter == UNDO ? {color: 'blue'} : {}}
        />
      </div>
    );
  }
}


export default TodoStateChange;